<template>
    <div class="zoom">
      <el-card class="zoom-card">
<!--        显示图片-->
        <div class="img-container" @mouseover="imageHandOver" @mousemove="imageEnter" @mouseout="imageHandOut" ref="img_container">
<!--          显示图片-->
          <el-image :src="src" alt=""></el-image>
          <div class="img-selected" :style="{top:selectTop+'px',left:selectLeft+'px'}" v-show="showMagnifier"></div>
        </div>

<!--        下方显示-->
        <div class="zoom-items">
          <el-carousel height="90px" indicator-position="outside" arrow="always">
            <el-carousel-item>
              <el-row :gutter="10">
               <el-col :span="6">
                 <el-image :src="src" alt=""></el-image>
               </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>

        </div>
      </el-card>
    </div>
</template>

<script>
export default {
  name: 'ZoomImage',
  data () {
    return {
      showMagnifier: false,
      showMask: false,
      selectTop: 0,
      selectLeft: 0
    }
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 进入小框事件
    imageHandOver () {
      // 计算小图框在浏览器中的位置
      this.imgRectNow = this.$refs.img_container.getBoundingClientRect()
      console.log(this.imgRectNow)
      this.showMagnifier = false
      this.showMask = true
    },
    // 移动事件
    imageEnter (res) {
      this.selectTop = res.screenY - this.imgRectNow.top - 75
      this.selectLeft = res.screenX - this.imgRectNow.left - 75
      // 上方
      this.selectTop = this.selectTop < 0 ? 0 : this.selectTop
      // 左方
      this.selectLeft = this.selectLeft < 0 ? 0 : this.selectLeft
      // 下方
      this.selectTop = this.selectTop > 400 + 75 ? 400 : this.selectTop
      // 左方
      this.selectLeft = this.selectLeft > 400 + 75 ? 400 : this.selectLeft
    },
    imageHandOut () {
      // this.showMagnifier = false
      // this.showMask = false
    }
  }
}
</script>

<style scoped lang="scss">
  .zoom-card {
    /deep/ .el-card__body {
        padding: 0;
    }
    .img-container{
      position: relative;
      .img-selected {
        position: absolute;
        height: 133px;
        width: 133px;
        background: rgba(0,0,0,.6);
      }
    }

    .zoom-items{
      padding: 5px 30px 0px;
      border-top: 1px solid #b0b0b0;
    }
    .el-carousel__arrow--left {
      left: -20px;
    }
  }
</style>
